/* 我的考试(开始考试部分) */
<template>
    <div>
        <div style="height: 30px;">
          <el-breadcrumb style="float: left;" separator="/" v-if='compile'>
              <el-breadcrumb-item :to="{ path: '/examInquiry' }">
                  <span @click="reback">{{ $t('examinInquiry.examinInquiry') }}</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item>{{ $t('examinInquiry.check') }}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-breadcrumb style="float: left;" separator="/" v-else>
              <el-breadcrumb-item :to="{ path: '/myExaminations' }">
                  <span @click="reback">{{ $t('myExams.myExam') }}</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item>{{ $t('myExams.startExam') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-card v-loading="loading" shadow="never" body-style="padding: 10px;">
            <el-row style="padding:15px 15px 0 15px;" class="row-bg" justify="space-between">
                <div>
                    <span style="font-size:20px; color:#101010;">{{$t('myExams.auxiliary')}}{{this.value}}{{$t('myExams.next')}}{{$t('myExams.mockTest')}}</span>
                    <el-button style="float:right; margin-left:10px;" @click="reback">{{ $t('myExams.goBack') }}</el-button>
                </div>
            </el-row>
            <hr >
            <div class="box">
              <el-row>
                <el-col :span="18"><div class="grid-content bg-purple">
                  <div class="page">
                    <div v-for="(item,index) in dataLists.questionVOList" :key="index" :id="'page'+index" >
                      <p>{{item.questionIndex +'. ' +item.questionName}} <span style="color:red;margin-left:15px">{{item.answer==item.studentAnswer?'':$t('myExams.correct')+'：'+item.answer}}</span></p>
                      <el-radio-group v-model="item.workContentst" >
                        <el-radio id='pages' disabled style="margin-left:20px" v-for="(items,indexs) in item.answerListVOList" :key="indexs" :label="items.optionCodes">{{items.optionCodes}}</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                </el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light" style="overflow-y: scroll; height: 800px;">
                  <div style="margin-left: 20px; margin-top: 20px;font-size: 16px;">
                  {{$t('myExams.auxiliary')}}<el-select v-model="value" @change="changeSelect"  style='width:60px'>
                      <el-option v-for="item in dataTabList"  :key='item.id' :label="item.examNumber" :value="item.examNumber"> </el-option>
                    </el-select>{{$t('myExams.results')}}
                  </div>
                    <hr>
                    <p style="margin-left: 20px;"><span style="font-size: 16px;">{{$t('myExams.examinaResult')}}：</span>  <span style="font-size: 20px;">{{result=='1'?$t('myExams.pass'):(result=='2'?$t('myExams.noPass'):'')}}</span></p>
                  <h2 style="margin-left: 20px;">{{$t('myExams.common')}}<span style="font-weight: 600;">{{dataList.questionVOList.length}}</span>{{$t('myExams.topic')}}:{{$t('myExams.has')}}<span style="font-weight: 600;">{{workConten.length}}</span>{{$t('myExams.subject')}},{{$t('myExams.theRight')}}<span style="font-weight: 600;">{{workCont.length}}</span>{{$t('myExams.way')}},{{$t('myExams.answer')}}<span style="font-weight: 600;">{{workConten.length-workCont.length}}</span>{{$t('myExams.way')}},{{$t('myExams.notAnswer')}}<span style="font-weight: 600;">{{dataList.questionVOList.length-workConten.length}}</span>{{$t('myExams.problem')}}</h2>
                  <div class="btns" style="margin-bottom:20px">
                    <a v-for="(item,index) in dataLists.questionVOList" :key="index" @click="submit(index)" :href="'#page'+index" 
                    :style="{'background-color': item.answer===item.studentAnswer?'#c3dcf5':(item.studentAnswer==''?'#edf1f5':'rgb(247, 157, 174)'),'color': item.answer===item.studentAnswer?'#3a7fe8':(item.studentAnswer==''?'black':'#f11919')}">{{index+1}}</a> 
                  </div>  
                  
                  <span style="border: solid 1px #81baf5; width: 16px; vertical-align: middle; height: 16px; display: inline-block;background: #e0e9f9;margin-left:10px"></span>
                    <span style="font-size: 15px;">{{$t('myExams.correct')}}</span>
                  <span style="border: solid 1px #dadcde; width: 16px; vertical-align: middle; height: 16px; display: inline-block;background: #e5e9f2;margin-left:15px"></span>
                    <span style="font-size: 15px;">{{$t('myExams.notCorrect')}}</span>
                  <span style="border: solid 1px #e05a79; width: 16px; vertical-align: middle; height: 16px; display: inline-block;background: rgb(249, 186, 191);margin-left:15px"></span>
                    <span style="font-size: 15px;">{{$t('myExams.wrong')}}</span>
                </div>
                </el-col>
              </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import myExaminationsApi from 'common/src/api/academicBehaviorNorms/myExaminations/myExaminations';
export default {
    props: {
      dataList: {
          type: Object,
          default: () => {}
      },
      dataObj: {
          type: Object,
          default: () => {}
      },
      compile: {
          type: String,
          default: ''
      }
    },
    data() {
      return {
        value: '',
        dataLists: [ ],
        dataNum: 0,
        dataNums: 0,
        options: {
          faculty: [], // 学院
          approver: [],
          profession: [], // 竞赛名称
          degreeType: [ ] // 竞赛级别
        },
        result: '',
        dataTabList: [],
        workConten: [], // 已答
        workContens: [], // 未答
        workCont: [], // 答对
      }
    },
   
    mounted() {
      this.result = this.dataList.result
      this.value = this.dataList.examNumber
      if (this.dataList.questionVOList.length>0) {
        this.dataList.questionVOList.forEach(el => {
          el.answerListVOList.forEach((ele,index) => {
            ele.optionCodes = ele.optionCode+'：'+ele.optionContent
            if (el.studentAnswer==ele.optionCode) {
              el.workContentst = ele.optionCodes
            }
          })
        })
        this.dataLists = this.dataList
        this.changeDataLists()
      }
      let obj = {
        studentId: this.dataObj.studentId,
        examId: this.dataObj.examId,
      }
      myExaminationsApi.getExamNumberByExamId(obj).then(res => {
        this.dataTabList = res.data
      })
    },
    methods: {
      changeSelect(val) {
        let obj = { }
        this.dataTabList.forEach(el => {
          if (val === el.examNumber) {
            obj = {
              studentId: this.dataObj.studentId,
              examId: this.dataObj.examId,
              id: el.id
            }
          }
        })
        myExaminationsApi.queryExamRecord(obj).then(res => {
          this.dataList = res.data
          this.result = this.dataList.result
          this.dataList.questionVOList.forEach(el => {
            el.answerListVOList.forEach((ele,index) => {
              ele.optionCodes = ele.optionCode+'：'+ele.optionContent
              if (el.studentAnswer==ele.optionCode) {
                el.workContentst = ele.optionCodes
              }
            })
          })
          this.dataLists = this.dataList
          this.changeDataLists()
        })
      },
      changeDataLists() {
        this.workConten = []
        this.workContens = []
        this.workCont = []
        this.dataLists.questionVOList.forEach(el => {
          if (el.studentAnswer) {
            this.workConten.push(el)
          } else {
            this.workContens.push(el)
          }
          if (el.answer==el.studentAnswer) {
            this.workCont.push(el)
          } 
        })
      },
      reback() {
        this.$emit('change-exam','view')
      },
      submit(num) {
        window.location.hash = '#page'+num; 
      },
      
    }
}
</script>

<style lang="scss" scoped>

.btns a {
    padding-top: 10px;
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    border: solid 1px #b2b3b5;
    margin-top: 5px;
}
.page div{
  width: 100%;
  min-height: 100px;
}
.page {
  overflow-y: scroll;
  height: 800px;
}
#pages ::v-deep {
  .el-radio__input.is-checked .el-radio__inner{
    background: #409EFF !important;
  }
}
</style>